<template>
  <div>
    <div class="mt10">
      <div class="mb10 fw600">标题：</div>
      <el-input v-model="activeComp.title" />
    </div>
    <div class="mt10">
      <div class="fw600">组件唯一值（uuid）：</div>
      <el-input v-model="activeComp.uuid" disabled />
    </div>
    <div class="mt10">
      <el-checkbox v-model="activeComp.required" label="是否必填" />
      <el-checkbox v-model="activeComp.disabled" label="是否禁用" />
    </div>
    <div class="options-panel mt10">
      <el-input
        type="textarea"
        v-model="options"
        :rows="10"
        placeholder='请输入JSON数组，例如[{ "value": 1, "label": "浙江"}, { "value": 2, "label": "江苏"}]'
      ></el-input>
      <el-button type="primary" class="mt10" @click="addOption">确认</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BaseCascaderConfig',
  props: {
    activeComp: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      options: '',
    };
  },
  watch: {
    options(val) {
      if (!val) {
        this.activeComp.options = [];
      }
    },
  },
  methods: {
    addOption() {
      try {
        const options = JSON.parse(this.options);
        this.activeComp.options = options;
      } catch (error) {
        console.error('JSON数组格式错误');
      }
    },
  },
};
</script>
<style lang="less" scoped>
.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.fw600 {
  font-weight: 600;
}
.tip-box {
  color: #fff;
  padding: 5px;
  background-color: #e6a23c;
}
</style>
